<template>
  <div style="font-size: 15px">
    <!-- 头部 -->
    <a-form ref="searchRef" :model="form" :hideRequiredMark="true">
      <a-row>
        <a-col :span="6" :offset="0">
          <a-form-item name="saleValue" label="收件人">
            <a-input
              placeholder="根据收件人模糊搜索"
              v-model:value="form.recipientName"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6" :offset="1">
          <a-form-item name="saleValue" label="邮件主题">
            <a-input
              placeholder="根据邮件主题模糊搜索"
              v-model:value="form.subject"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="2" :offset="1">
          <a-button type="primary" @click="search" class="d-a-center"
            >搜索</a-button
          >
        </a-col>
        <a-col :span="2">
          <a-button @click="reset" class="d-a-center">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
    <div v-if="listLength > 0">
      <a-table
        style="cursor: pointer"
        :dataSource="emailList.value"
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        @change="handleTableChange"
        :customRow="rowClick"
        :showHeader="false"
      >
        <!-- 订单状态显示 --><!-- 1为已读，0为未读 -->
        <template v-slot:bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex == 'isRead'">
            <img
              class="email-img"
              v-show="record.isRead == 1"
              src="@/assets/img/email/email-read.png"
              alt="emailRead"
            />
            <img
              class="email-img"
              v-show="record.isRead == 0"
              src="@/assets/img/email/email-unread.png"
              alt="emailUnread"
            />
          </template>
        </template>
      </a-table>
    </div>
    <a-empty :image="simpleImage" v-else />
    <!-- 列表 -->
  </div>
</template>
<script>
import { useRoute, useRouter } from "vue-router";
import router from "@/router/index.js";
import {
  reactive,
  ref,
  toRefs,
  watch,
  computed,
  defineComponent,
  createVNode,
} from "vue";
import {
  CloseOutlined,
  PlusCircleOutlined,
  ApartmentOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  // 附件
  PaperClipOutlined,
  FileExcelOutlined,
  FileGifOutlined,
  FilePptOutlined,
  FileMarkdownOutlined,
  FileImageOutlined,
  FileJpgOutlined,
  FilePdfOutlined,
  FileZipOutlined,
  FileWordOutlined,
  FileTextOutlined,
  FileUnknownOutlined,
} from "@ant-design/icons-vue";
import { Modal, message, Empty } from "ant-design-vue";
import { sentEmailList } from "@/api/email/index.js";
export default {
  components: {},
  setup() {
    const router = useRouter();
    const searchRef = ref("");
    // 搜索
    // let form = reactive({
    // 	recipientName: '',
    // 	subject: ''
    // });
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });
    const data = reactive({
      loading: ref(true), //表格的加载
      listLength: 0,
      form: {},
    });
    const emailList = reactive([]);
    const columns = [
      {
        title: "是否已读",
        dataIndex: "isRead",
        key: "isRead",
        width: 40,
      },
      {
        title: "收件人",
        dataIndex: "recipientName",
        key: "recipientName",
        ellipsis: true,
        width: 270,
      },
      {
        title: "邮箱主题",
        dataIndex: "subject",
        key: "subject",
        ellipsis: true,
      },
      {
        title: "发送时间",
        dataIndex: "createdAt",
        key: "createdAt",
        width: 180,
      },
    ];
    let detailUrl = decodeURI(router.options.history.state.forward);
    if (detailUrl != null) {
      let sta = detailUrl.indexOf("email-detail") != -1;
      console.log("sta", detailUrl);
      if (sta) {
        let a = detailUrl.length;
        let b = detailUrl.lastIndexOf("=");
        page.current = detailUrl.substr(b + 1, a - b);
        console.log("详情页传过来的列表页数", page.current);
        let c = detailUrl.lastIndexOf("&");
        let d = detailUrl.lastIndexOf("=", detailUrl.lastIndexOf("=") - 1) + 1;
        data.form = JSON.parse(detailUrl.substring(d, c));
        console.log("暂存的搜索数据form", data.form);
      }
    }
    init();
    async function init() {
      data.loading = false;
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...data.form,
      };
      console.log(obj);
      let res = await sentEmailList(obj);
      if (res.success) {
        emailList.value = res.object.list;
        console.log("已发送列表111", emailList.value);
        page.total = res.object.total;
        data.listLength = emailList.value.length;
      }
    }
    // 分页器/-
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));
    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log("当前分页是", page.current);
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;
      console.log("普通搜索1111111111111111111");
      init();
    };

    // 查询邮件
    const search = () => {
      page.current = 1;
      init();
    };
    const rowClick = (record, index) => {
      return {
        onclick: (event) => {
          console.log("1122email详情11111111111");
          router.push({
            path: "/email/all/look/email-detail",
            query: {
              id: record.id,
              form: JSON.stringify(data.form),
              page: page.current,
            },
          });
        },
      };
    };
    const methods = {
      reset() {
        console.log("重置111111");
        data.form = {};
        page.current = 1;
        init();
      },
    };
    return {
      ...toRefs(data),
      ...methods,
      // form,
      emailList,
      searchRef,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      columns,
      pagination,
      handleTableChange,
      rowClick,
      search,
    };
  },
};
</script>
<style scoped lang="less">
.email-img {
  width: 20px;
  height: 25px;
}
</style>

